<script>
export default {
  name: "tab-header",
  data() {
    return {
      currentIndex: -1
    }
  },
  props: {
    tabDataList: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  emits:["changeTabIndex"],
  methods: {
    handler(index) {
      this.currentIndex = index
      this.$emit("changeTabIndex",index)
    }
  }
}
</script>

<template>
  <ul class="layui-nav layui-bg-cyan">
    <li class="layui-nav-item" v-for="(item,index) in tabDataList" :key="index" @click="handler(index)"><a href="#" :class="{active:currentIndex===index}">{{ item }}</a></li>
  </ul>
</template>

<style scoped lang="less">
.active {
  color: red !important;
}
</style>